@extends('layouts.admin')
@section('pageTitle', '数据统计')
@inject('storeService', 'App\App\Services\StorageService')
@section('style')
@endsection
@section('content')
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <div class="money-box">剩余金额: 1314 <button style="background: #169bd5;color:#ffffff;border-color:#169bd5;margin-left:5px;font-size: 13px;padding:2px 15px;" class="btn btn-primary btn-sm chongqian">充值</button></div>
                <div class="mini-charts" style="margin-top:15px;">
                    <div class="row">
                        <div class="col-sm-12 col-md-3">
                            <div class="mini-charts-item">
                                <div class="clearfix">
                                    <div class="count abc">
                                        <small class="text-s1">应用新增人数<span style="line-height: 1.6;color:#eeeeee" class="pull-right">累积人数: 293</span></small>
                                        <hr>
                                        <small class="text-s1" style="display:block;padding-top:70px;" >相比昨天 <span class="up">0.00%</span></small>
                                        <div class="big-num" style="left:14px;">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-3">
                            <div class="mini-charts-item">
                                <div class="clearfix">
                                    <div class="count abc">
                                        <small class="text-s1">新增参与人数<span style="line-height: 1.6;color:#eeeeee" class="pull-right">累积人数: 93</span></small>
                                        <hr>
                                        <small class="text-s1" style="display:block;padding-top:70px;" >相比昨天 <span class="up">0.00%</span></small>
                                        <div class="big-num" style="left:14px;">12</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-3">
                            <div class="mini-charts-item">
                                <div class="clearfix">
                                    <div class="count abc">
                                        <small class="text-s1">奖品领取人数<span style="line-height: 1.6;color:#eeeeee" class="pull-right">累积人数: 3</span></small>
                                        <hr>
                                        <small class="text-s1" style="display:block;padding-top:70px;" >相比昨天 <span class="down">14.50%</span></small>
                                        <div class="big-num" style="left:14px;">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-3">
                            <div class="mini-charts-item">
                                <div class="clearfix">
                                    <div class="count abc">
                                        <small class="text-s1">活动分享人数<span style="line-height: 1.6;color:#eeeeee" class="pull-right">累积人数: 13</span></small>
                                        <hr>
                                        <small class="text-s1" style="display:block;padding-top:70px;" >相比昨天 <span class="up">5.00%</span></small>
                                        <div class="big-num" style="left:14px;">450</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="header" style="font-size: 16px;margin-bottom: 20px">活动及奖品数据统计概况</div>
                    <div class="chart-box">
                        <div class="chart-box-item" style="width:48%;margin:1%;float:left;">
                            <div class="chart-box-title" style="background: #f2f2f2;color:#333333;line-height: 3;text-indent: 20px;letter-spacing: 1px;">活动曝光数</div>
                            <div id="expose-chart-box" class="chart-box-wrap" style="height: 250px;"></div>
                        </div>
                        <div class="chart-box-item" style="width:48%;margin:1%;float:right;">
                            <div class="chart-box-title" style="background: #f2f2f2;color:#333333;line-height: 3;text-indent: 20px;letter-spacing: 1px;">活动分享数</div>
                            <div id="share-chart-box" class="chart-box-wrap" style="height: 250px;"></div>
                        </div>
                        <div class="chart-box-item" style="width:48%;margin:1%;float:left;">
                            <div class="chart-box-title" style="background: #f2f2f2;color:#333333;line-height: 3;text-indent: 20px;letter-spacing: 1px;">奖品中奖数</div>
                            <div id="win-chart-box" class="chart-box-wrap" style="height: 250px;"></div>
                        </div>
                        <div class="chart-box-item" style="width:48%;margin:1%;float:right;">
                            <div class="chart-box-title" style="background: #f2f2f2;color:#333333;line-height: 3;text-indent: 20px;letter-spacing: 1px;">奖品兑奖数</div>
                            <div id="cash-chart-box" class="chart-box-wrap" style="height: 250px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function () {
            var exposeChart = echarts.init(document.getElementById('expose-chart-box'));
            var shareChart = echarts.init(document.getElementById('share-chart-box'));
            var winseChart = echarts.init(document.getElementById('win-chart-box'));
            var cashChart = echarts.init(document.getElementById('cash-chart-box'));

            exposeOption = {
                legend: {
                       data:['人数','次数','人均次数'],
                       y: 'top',
                       x: 'center',
                       padding:10,

                   },
                   xAxis : [
                       {
                           type : 'category',
                           boundaryGap : false,
                           data : ['2018-05-19','2018-05-20','2018-05-21','2018-05-22'],
                           axisLine:{
                               lineStyle:{
                                   color: '#000000',
                                   width: 1,
                                   shadowBlur: 0,
                                   shadowOffsetX: 0,
                                   shadowOffsetY: 0
                               }
                           },
                           axisLabel: {
                               show: true,
                               textStyle: {
                                   color: '#333333'
                               }
                           },
                           splitLine: {
                               lineStyle: {
                                   color: 'transparent'
                               }
                           },
                           axisTick: {
                               lineStyle: {
                                   color: '#000000'
                               }
                           }
                       }
                   ],
                   yAxis : [
                       {
                           type : 'value',
                           axisLabel: {
                               formatter: '{value}'
                           },
                           axisLine:{
                               lineStyle:{
                                   color: '#000000',
                                   width: 1,
                                   shadowBlur: 0,
                                   shadowOffsetX: 0,
                                   shadowOffsetY: 0
                               }
                           },
                           axisLabel: {
                               show: true,
                               textStyle: {
                                   color: '#333333'
                               }
                           },
                           splitLine: {
                               lineStyle: {
                                   color: '#dddddd'
                               }
                           },
                           axisTick: {
                               show: true,
                               lineStyle: {
                                   color: '#000000'
                               }
                           }
                       }
                   ],
                   series : [
                       {
                           name:'人数',
                           type:'line',
                           smooth: true,
                           itemStyle: {
                               normal: {
                                   lineStyle: {
                                       width: 1,
                                       shadowBlur: 0,
                                       shadowOffsetX: 0,
                                       shadowOffsetY: 0,
                                   }
                               },
                           },
                           data:[11, 11, 15, 13]
                       },
                       {
                           name:'次数',
                           type:'line',
                           smooth: true,
                           itemStyle: {
                               normal: {
                                   lineStyle: {
                                       width: 1,
                                       shadowBlur: 0,
                                       shadowOffsetX: 0,
                                       shadowOffsetY: 0,
                                   }
                               },
                           },
                           data:[3, 5, 5, 4]
                       },
                       {
                           name:'人均次数',
                           type:'line',
                           smooth: true,
                           itemStyle: {
                               normal: {
                                   lineStyle: {
                                       width: 1,
                                       shadowBlur: 0,
                                       shadowOffsetX: 0,
                                       shadowOffsetY: 0,
                                   }
                               },
                           },
                           data:[1, 1, 2, 1]
                       },
                   ],
                   grid: {
                    x: 35,
                    y: 40,
                    x2: 35,
                    y2: 20
                   }
            };
            exposeChart.setOption(exposeOption);
            shareChart.setOption(exposeOption);
            winseChart.setOption(exposeOption);
            cashChart.setOption(exposeOption);
        });
    </script>
@endsection